<template>
  <div class="home">
    <div id="container"></div>
    <div id="map_move">
      <div id="move" class="mapzoom" title="拖动移动">
        <svg-icon name="moveMap"></svg-icon>
      </div>
      <div id="polygon" class="mapzoom" title="画多边形">
        <svg-icon name="polygon"></svg-icon>
      </div>
      <div id="polyline" class="mapzoom" title="画折线">
        <svg-icon name="brokenLine"></svg-icon>
      </div>
    </div>
    <div id="handle">
      <span id="editGrid" class="mapzoom" title="编辑" @click="editPolygon">
        <el-icon><Edit /></el-icon>
      </span>
      <span id="clearAllGrid" class="mapzoom" title="删除">
        <el-icon><Delete /></el-icon>
      </span>
    </div>
    <div id="mode">
      <div :class="{'active': viewActive }" title="显示普通地图" @click="standardMap">地图</div>
      <div :class="{'active': !viewActive }" title="显示带有街道的卫星图像" @click="moonMap">混合</div>
    </div>
    <div id="mapzoom">
      <div class="mapzoom" title="缩小" @click="mapMinZoom">
        <el-icon><ZoomOut /></el-icon>
      </div>
      <div class="mapzoom" title="放大" @click="mapMaxZoom">
        <el-icon><ZoomIn /></el-icon>
      </div>
      <div class="mapzoom" title="初始位置" @click="mapInitZoom">
        <el-icon><Location /></el-icon>
      </div>
      <div class="mapzoom" title="暗黑模式" @click="mapSetStyle">
        <el-icon>
          <Sunny v-if="data.dark" />
          <Moon v-else />
        </el-icon>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue'
import MapCore from '@/utils/map_gaode'
import { sortByPloygonArea } from '@/utils/drawTools'
const mapConfig = ref({
  location: [113.371067, 23.083159],
  zoom: 11,
  viewMode: '3D'
})
const data = reactive({
  dark: '',
  polyEditor: '',
  hasDraw: true,
  overlays: [], // 所画多边形
})
const viewActive = ref(true)
const map = ref(null)
onMounted(() => {
  initMap()
  addDrawTool()
})

const initMap = () => {
  map.value = new MapCore('container', mapConfig.value)
  if (data.dark) map.value.setMapStyle({ style: 'dark' }) // 地图背景黑色
  const point = new MapCore.Point(mapConfig.value.location) // 设置中心点
  map.value.setCenterAndZoom(point, +mapConfig.value.zoom)
  map.value.enableZoom(true) // 设置可缩放
  // 添加比例尺控件
  map.value.addScaleControl()
  // 显示地图图层
  map.value.addMapType()
  // 添加画图
  if (data.hasDraw) addDrawTool()
}
const clearAll = () => {
  map.value.removeOverlay(data.overlays)
}
const mapMinZoom = () => {
  // 地图缩小
  map.value.setZoom(map.value.getZoom() - 1)
}
const mapMaxZoom = () => {
  // 地图放大
  map.value.setZoom(map.value.getZoom() + 1)
}
const mapInitZoom = () => {
  // eslint-disable-next-line no-undef
  const point = new MapCore.Point(mapConfig.value.location)
  map.value.setCenterAndZoom(point, mapConfig.value.zoom + 1)
}
const mapSetStyle = () => {
  data.dark = !data.dark
  if (data.dark) {
    map.value.setMapStyle({ style: 'dark' })
  } else {
    map.value.setMapStyle({ style: 'normal' })
  }
}

const addDrawTool = () => {
  const baseOption = {}
  const styleOption = {
    strokeColor: 'red',
    fillColor: 'red',
    strokeWeight: 2,
    fillOpacity: 0.5
  }
  // 看看 https://juejin.cn/post/6844904164959453198
  map.value.addDrawingManager(baseOption, styleOption)
  console.log('this.map', map.value)
}

// 显示标准地图
const standardMap = () => {
  map.value.removeMapTypeControl()
  viewActive.value = true
}
// 显示卫星地图
const moonMap = () => {
  viewActive.value = false
  map.value.addMapTypeControl()
}
const editPolygon = () => {}
</script>

<style lang="scss" scoped>
.home {
  margin-top: 50px;
  width: 100%;
  height: 100vh;
}
#container {
  margin-top: 50px;
  width: 100%;
  height: 100vh;
}
#mapzoom {
  position: absolute;
  top: 130px;
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.mapzoom {
  width: 25px;
  height: 25px;
  color: #409eff;
  background-color: #fff;
  line-height: 25px;
  text-align: center;
  border-radius: 2px;
  margin-top: 5px;
  border: 1px solid #dfdfdf;
  cursor: pointer;
}
.move {
  background-color: #409eff;
}
#map_move{
  position: absolute;
  top: 60px;
  right: 260px;
  display: flex;
  align-items: flex-end;
}
#mode {
  position: absolute;
  top: 65px;
  right: 10px;
  display: flex;
  div {
    font-size: 12px;
    font-weight: bold;
    border: 1px solid #409eff;
    background-color: #fff;
    padding: 3px 4px;
    cursor: pointer;
    &:last-child {
      border-left: none;
    }
  }
}
.active {
  background-color: #409eff !important;
  color: #fff;
}
#handle {
  position: absolute;
  top: 65px;
  right: 140px;
  display: flex;
  align-items: flex-end;
  display: none;
  span {
    &:first-child {
      margin-right: 2px;
    }
  }
}
</style>
